<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        //触屏事件 touch
        var div = document.querySelector('div');
        //1. touchstart  手指触摸到一个DOM元素时触发
            div.addEventListener('touchstart',function(e){
                console.log(1);
                console.log(e);
            })
        //2. touchmove   手指在一个DOM元素上滑动时触发
            div.addEventListener('touchmove',function(e){
                console.log(2);
                console.log(e);
            })
        //3. touchend     手指从一个DOM元素上移开时触发
        div.addEventListener('touchend',function(e){
            console.log(3);
            console.log(e);
        })

        //触摸事件对象
        // 1. touches  正在触摸屏幕的所有手指的一个列表
        //2. targetTouches 正在触摸当前DOM元素上的手指的一个列表
        //3. changedTouches  手指状态发生了改变的列表 ，从无到有，从有到无变化
    </script>
</body>
</html>